<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>内置指令</title>
    <script src="../js/vue.js"></script>
    <style>
        [v-cloak]{
            display: none;
        }
    </style>
</head>
<body>
    <!-- 
        v-bind: 单向绑定解析表达式，可简写为:xxx
        v-model: 双向数据绑定
        v-for: 遍历数组、对象、字符串
        v-on: 绑定事件监听，可简写为@
        v-if: 条件渲染（动态控制节点是否存在）
        v-else: 条件渲染（动态控制节点是否存在）
        v-show: 条件渲染（动态控制节点是否展示）
        
        v-text:
            1.作用：向其所在的节点中渲染文本内容
            2.与插值语法的区别：v-text会替换掉节点中的内容，{{xxx}}则不会
            3.与v-html的区别：v-text不支持结构的解析，比如内容为<h2>hello</h2>会直接解析为字符串。v-html支持

        v-html指令：
            1.作用：向指定节点中渲染包含html结构的内容
            2.与插值语法的区别：
                (1).v-html会替换掉节点中所有的内容，{{xxx}}则不会
                (2).v-html可以识别html结构
            3.严重注意：v-html有安全性问题！！！
                (1).在网站上动态渲染任意HTML是非常危险的，容易导致XSS攻击
                (2).一定要在可信的内容上使用v-html，永远不要在用户提交的内容上使用

        v-clock指令（没有值）:
            1.本质是一个特殊属性，Vue实例创建完毕并接管容器后，会删掉v-clock属性.
            2.使用css配置v-cloak可以解决网速慢时展示出{{xxx}}的问题
        v-once指令：
            1.v-once所在节点在初次动态渲染后，就视为静态内容了
            2.以后数据的改变不会引起v-once所在结构的更新，可以用于优化性能
        v-pre指令：
            1.跳过其所在节点的编译过程。
            2.可利用它跳过：没有使用指令语法、没有使用插值语法的节点，会加快编译。
    -->
    <div id="root">
        <h2>你好，{{name}}</h2>
        <h2 v-text="name">你好，</h2>
        <h2 v-html="str"></h2>
        <h2 v-cloak>{{name}}</h2>
        <h2 v-once>初始num：{{num}}</h2>
        <h2>累加num：{{num}}</h2>
        <button @click="num++">累加数字</button>
        <h2 v-pre>Vue的学习</h2>
        <!-- 不能使用在有插值语法的地方，否则该内容不会解析插值 -->
        <h2 v-pre>{{name}}</h2>
    </div>
    <script type="text/javascript">
       
        const vm = new Vue({
            el: "#root",
            data:{
              name: "LittleAnt",
              str: "<h3>标签<h3>",
                num: 1
            },
        })
    </script>
</body>
</html>